<template>
  <div class="bj">
    <!-- 顶部导航栏 -->
    <van-nav-bar>
      <template #right>
        <button :class="add ?'ys1':'ys'" @click="lo()">发布</button>
      </template>
      <template #title>
        <div v-text="ax"></div>
      </template>
      <template #left>
        <div @click="ts()">取消</div>
      </template>
    </van-nav-bar>
    <!-- 按钮发帖 -->
    <div>
      <div>
        <span class="dx">发帖至</span>
        <van-button class="yans" @click="showPopup" v-for="(inv,dec) in aee" :key="dec"> {{inv}}</van-button>
      </div>
      <div class="zt">
        <!-- 文本框 -->
        <input
          type="text"
          placeholder="标题(10-30字之间)"
          maxlength="30"
          class="wb"
          v-model="skty"
          @keydown="zt()"
        />
        <!-- 文本域 -->
        <div>
          <textarea
          v-model="skty1"
            name=""
            id=""
            cols="30"
            rows="10"
            placeholder="请填写正文内容..."
            class="wyu"
            @keydown="zt()"
          ></textarea>
        </div>
        <div><van-uploader v-model="fileList" multiple /></div>
      </div>
    </div>
    <!-- 弹出框 -->
    <div>
      <van-popup v-model="show" position="top" :style="{ height: '100%' }">
        <div class="ytr1">选择1-2个主题(必选)</div>
        <van-checkbox-group v-model="result" :max="2">
          <van-checkbox
            v-for="(i, n) in arr"
            :key="n"
            :name="i.name1"
            class="ytr"
            >{{ i.name1 }}</van-checkbox
          >
        </van-checkbox-group>
        <!-- 确认按钮 -->
        <van-button type="primary" @click="su5()" class="js">确认</van-button>
      </van-popup>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      add: true,
      value: '',
      ax: '',
      show: false,
      result: [],
      skty:'',
      skty1:'',
      arr: [
        { name1: '野钓传统军', correct: false },
        { name1: '大湿求指导', correct: false },
        { name1: '水军集中营', correct: false },
        { name1: '反电鱼同盟', correct: false },
        { name1: '钓友来约钓', correct: false },
        { name1: '爆护司令部', correct: false },
        { name1: '干了个大物', correct: false },
        { name1: '钓鱼用良方', correct: false },
        { name1: '海岛自卫队', correct: false },
        { name1: 'DIY小达人', correct: false },
        { name1: '我是女钓手', correct: false },
        { name1: '路亚委员会', correct: false },
        { name1: '黑坑赌钓塘', correct: false },
        { name1: '钓鱼鱼汛', correct: false },
        { name1: '试用报告', correct: false },
        { name1: '龙王恨征文活动', correct: false },
      ],
      aee:['点击选择'],
       fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
    };
  },
  mounted() {
    localStorage.setItem('dd', this.$route.query.ft);
    this.ax = localStorage.getItem('dd');
  },
  methods: {
    ts() {
      this.$router.push({
        name: 'forum',
      });
    },
    showPopup() {
      this.show = true;
      console.log(this.fileList)
    },
     su5() {
    this.show = false;
    if(this.result.length > 0){
      this.aee = this.result
    }
  },
  zt(){
      if(this.skty === '' || this.skty1 === ''){
      this.add = false
    }
  },
  lo(){
    var aff = []
    for(var i =0;i<fileList.length;i++){
        aff.push(fileList[i].content)
    }
    axios.post('/api/article/addArticle',{},{
      params:{
        content:this.skty,
        typeName:this.aee,
        
      }
    })
  }
  
  },
 
};
</script>
<style scoped>
/* 按钮的颜色 */
.ys {
  background-color: white;
  border: rgb(42, 197, 63) 0.11rem solid;
  width: 4.5rem;
  height: 3rem;
  border-radius: 0.3rem;
  color: rgb(27, 230, 37);
}
.ys1{
  display: none;
}
/* 文本框 */
.wb {
  width: 34rem;
  height: 3rem;
  font-size: 1.7rem;
  background-color: white;
  border: darkgray 0.03rem solid;
  margin-top: 3rem;
}
/* 整体 */
.zt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
/* 文本域 */
.wyu {
  width: 32rem;
  margin-top: 2rem;
}
/* 整体背景颜色 */
.bj {
  background-color: rgba(211, 203, 203, 0.178);
  height: 65rem;
}
/* 字体大小 */
.dx {
  font-size: 1.7rem;
  position: relative;
  top: 1.7rem;
}
/* 点击选择的样式 */
.yans {
  height: 3.5rem;
  position: relative;
  top: 1.3rem;
  left: 0.3rem;
  border-radius: 0.7rem;
}
/* 选择按钮的样式 */
.ytr {
  margin-top: 2rem;
  margin-left: 0.8rem;
  font-size: 1.6rem;
}
.ytr1{
  font-size:2rem;
   margin-top: 1.3rem;
  margin-left: 0.8rem;
}
/* 弹出确认按钮 */
.js{
width: 37.5rem;
margin-top: 3rem;
position: sticky;
bottom: 0;
}
</style>